import React, { useState } from "react";
import "./App.css";
// 导入heroicons图标
import { 
  PencilIcon, 
  DocumentArrowUpIcon, 
  CameraIcon,
  MagnifyingGlassIcon,
  CheckCircleIcon,
  ArrowsPointingOutIcon,
  LightBulbIcon,
  ChartBarIcon,
  AcademicCapIcon,
  ClockIcon,
  WrenchIcon,
  ExclamationTriangleIcon
} from "@heroicons/react/24/outline";

function App() {
  const [email, setEmail] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert(`感谢您的订阅！我们已收到您的邮箱：${email}`);
    setEmail("");
  };

  return (
    <div className="app">
      {/* 顶部导航区域 */}
      <header className="header">
        <nav className="nav">
          <div className="nav-brand">英语作文智能批改</div>
          <ul className="nav-menu">
            <li className="nav-item active">首页</li>
            <li className="nav-item">智能批改</li>
            <li className="nav-item">批改记录</li>
            <li className="nav-item">个人中心</li>
          </ul>
        </nav>
      </header>

      {/* 英雄区域 */}
      <section className="hero">
        <div className="hero-content">
          <h1 className="hero-title">英语作文智能批改应用</h1>
          <p className="hero-subtitle">结合 OpenAI 技术，提供精准、高效的作文批改服务</p>
          <button className="cta-button primary">立即体验</button>
        </div>
      </section>

      {/* 痛点说明区域 */}
      <section className="pain-points">
        <div className="container">
          <h2 className="section-title">传统作文批改的痛点</h2>
          <div className="pain-points-grid">
            <div className="pain-point-card">
              <ClockIcon className="pain-point-icon" />
              <h3>等待周期长，反馈不及时</h3>
            </div>
            <div className="pain-point-card">
              <WrenchIcon className="pain-point-icon" />
              <h3>功能单一，缺乏全面指导</h3>
            </div>
            <div className="pain-point-card">
              <ExclamationTriangleIcon className="pain-point-icon" />
              <h3>准确性不足，参考价值低</h3>
            </div>
            <div className="pain-point-card">
              <AcademicCapIcon className="pain-point-icon" />
              <h3>缺乏个性化提升建议</h3>
            </div>
          </div>
        </div>
      </section>

      {/* 目标用户区域 */}
      <section className="target-users">
        <div className="container">
          <h2 className="section-title">为各阶段学习者量身打造</h2>
          <div className="target-users-content">
            <div className="target-users-image">
              <div className="placeholder-image">学生群体示意图</div>
            </div>
            <div className="target-users-text">
              <p>从小学到大学各阶段英语学习者，希望提升写作能力，包括提高语法准确性、丰富词汇运用、优化文章结构和逻辑等。</p>
            </div>
          </div>
        </div>
      </section>

      {/* 核心功能区域 */}
      <section className="features">
        <div className="container">
          <h2 className="section-title">强大功能，全面提升写作水平</h2>
          
          {/* 作文提交功能 */}
          <div className="feature-section">
            <h3 className="feature-section-title">作文提交功能</h3>
            <div className="feature-grid">
              <div className="feature-card">
                <div className="feature-icon">
                  <PencilIcon />
                </div>
                <h4>文本输入</h4>
                <p>直接在应用内输入，支持复制、粘贴、删除、修改等编辑操作</p>
              </div>
              <div className="feature-card">
                <div className="feature-icon">
                  <DocumentArrowUpIcon />
                </div>
                <h4>文档上传</h4>
                <p>支持.doc、.docx、.txt等常见格式文档上传，自动识别提取文本</p>
              </div>
              <div className="feature-card">
                <div className="feature-icon">
                  <CameraIcon />
                </div>
                <h4>拍照识别</h4>
                <p>拍摄手写作文，通过OCR技术转换为可编辑文本，提供图像预处理功能</p>
              </div>
            </div>
          </div>
          
          {/* 智能批改功能 */}
          <div className="feature-section">
            <h3 className="feature-section-title">智能批改功能 (基于 LLM 技术)</h3>
            <div className="feature-grid">
              <div className="feature-card">
                <div className="feature-icon">
                  <MagnifyingGlassIcon />
                </div>
                <h4>拼写检查</h4>
                <p>校验单词拼写，提供正确拼写及详细信息（音标、多词义、同义词、反义词、用法示例）</p>
              </div>
              <div className="feature-card">
                <div className="feature-icon">
                  <CheckCircleIcon />
                </div>
                <h4>语法检查</h4>
                <p>识别复杂语法问题，提供修改建议及语法规则讲解，配多个正确示例</p>
              </div>
              <div className="feature-card">
                <div className="feature-icon">
                  <LightBulbIcon />
                </div>
                <h4>词汇评估</h4>
                <p>分析词汇等级比例和丰富度，推荐更贴切的同义替换词并说明理由，突出亮点词汇</p>
              </div>
              <div className="feature-card">
                <div className="feature-icon">
                  <ArrowsPointingOutIcon />
                </div>
                <h4>句子结构分析</h4>
                <p>分析句子长度和复杂度，提供合并或拆分建议；检查句子间逻辑关系，推荐合适连接词</p>
              </div>
              <div className="feature-card">
                <div className="feature-icon">
                  <AcademicCapIcon />
                </div>
                <h4>内容评估</h4>
                <p>判断切题程度，评估内容完整性，分析段落间连贯性和逻辑性，提供针对性改进建议</p>
              </div>
              <div className="feature-card">
                <div className="feature-icon">
                  <ChartBarIcon />
                </div>
                <h4>打分功能</h4>
                <p>多维度综合打分，生成详细评分报告，说明各维度得分情况及扣分原因</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 行动召唤区域 */}
      <section className="cta-section">
        <div className="container">
          <h2 className="section-title">立即开始提升你的英语写作能力</h2>
          <div className="cta-buttons">
            <button className="cta-button secondary">免费试用</button>
            <button className="cta-button secondary">查看演示</button>
          </div>
          <form className="email-form" onSubmit={handleSubmit}>
            <input 
              type="email" 
              placeholder="输入邮箱，获取最新资讯" 
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <button type="submit" className="cta-button tertiary">订阅</button>
          </form>
        </div>
      </section>

      {/* 页脚区域 */}
      <footer className="footer">
        <div className="container">
          <div className="footer-content">
            <p>版权信息 | 联系方式 | 隐私政策 | 使用条款</p>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default App;